<template>
  <div class="page">
    <v-pageTitle title="工时列表"></v-pageTitle>
    <!--工具条-->
    <v-pageToolbar align="left">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="查询条件">
          <el-date-picker
            v-model="formSearch.value"
            type="daterange"
            size="small"
            align="right"
            placeholder="选择日期范围"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formSearch.branch" size="small" filterable placeholder="请选择">
            <el-option
              v-for="item in branchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-select size="small" v-model="formSearch.staff" filterable placeholder="请选择查询关键字">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
      <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" :default-sort="{prop: 'sum', order: 'level'}">
        <el-table-column prop="branch" label="部门" min-width="120" sortable>
        </el-table-column>
        <el-table-column prop="staff" label="编号" min-width="160" sortable>
        </el-table-column>
        <el-table-column prop="name" label="人员" min-width="100" sortable>
        </el-table-column>
        <el-table-column prop="workTime" label="工作时长" min-width="170" sortable>
        </el-table-column>
        <el-table-column prop="leaveTime" label="请假时长" min-width="170" sortable>
        </el-table-column>
        <el-table-column prop="work" label="总工时" min-width="170" sortable>
        </el-table-column>
      </el-table>
    </v-pageTable>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        branchOptions:[
          {
            value: '选项1',
            label: '软件部'
          }, {
            value: '选项2',
            label: '新业务部'
          }, {
            value: '选项3',
            label: '市场部'
          }, {
            value: '选项4',
            label: '维修部'
          }, {
            value: '选项5',
            label: '人事部'
          }
        ],
        options: [
          {
            value: '选项1',
            label: '张召忠'
          }, {
            value: '选项2',
            label: '张喜'
          }, {
            value: '选项3',
            label: '陈光明'
          }, {
            value: '选项4',
            label: '许静海'
          }, {
            value: '选项5',
            label: '张家力'
          },
          {
            value: '选项6',
            label: '司琳'
          }, {
            value: '选项7',
            label: '岩栓天'
          }, {
            value: '选项8',
            label: '俗称并'
          }, {
            value: '选项9',
            label: '王盼盼'
          }, {
            value: '选项10',
            label: '王亚'
          }
        ],
        formSearch:{
          value: new Date(),
          branch:'',
          staff: ''
        },
        tableData: {
            loading: true,
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      onSearch(formSearch){
        console.log(formSearch)
      },
      getTableData() {
          // ajax 查询表格数据
          this.tableData.body = [
            {
              id: 1,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 2,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 3,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 4,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 5,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 6,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 7,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 8,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }, {
              id: 9,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            },{
              id: 10,
              branch: '新业务部',
              staff: '260000019',
              name: '张宗昭',
              workTime: '80',
              leaveTime: '5',
              work: '75'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      sizeChange(val){
        this.getTableData()
      },
      pageChange(val){
        console.log(val)
        this.getTableData()
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
    }
  }
</script>